<template>
  <view class="page">
    <view class="banner">
      <u-swiper :list="bannerList" :autoplay="true" :indicator="true" indicatorMode="dot" :circular="true" height="230" radius="0"></u-swiper>
    </view>
	<view class="nav">
		<view class="item item-1" @click="toClassList">
			<view class="icon">
				<image src="~@/static/image/icon-kecheng.svg"></image>
			</view>
			<view class="text">热门课程</view>
		</view>
		<view class="item item-2" @click="toTicket">
			<view class="icon">
				<image src="~@/static/image/icon-yongpiao.svg"></image>
			</view>
			<view class="text">泳票</view>
		</view>
		<view class="item item-3" @click="toActiveList">
			<view class="icon">
				<image src="~@/static/image/icon-huodong.svg"></image>
			</view>
			<view class="text">活动</view>
		</view>
		<!-- <view class="item item-4">
			<view class="icon">
				<image src="~@/static/image/icon-jiaoshi.svg"></image>
			</view>
			<view class="text">咨询教师</view>
		</view> -->
	</view>
	<view class="box-floor">
		<view class="hd-title">
			场馆展示
		</view>
		<view class="box-venue" @click="toVenue">
			<view class="venue-pic">
				<image src="http://127.0.0.1:32767/10.27.34/images/%E9%A6%96%E9%A1%B5/u8.svg"></image>
			</view>
			<view class="venue-address">
				<i class="iconfont icon-daohangdizhi"></i>
				<text>地址：福建省漳州市芗城区大学路1104号</text>
			</view>
		</view>
	</view>
	<view class="box-floor">
		<view class="hd-title" @click="toClassList">
			热门课程
			<view class="link-more">更多 <u-icon name="arrow-right-double" color="#999"></u-icon></view>
		</view>
		<view class="item-list">
			<view class="item" @click="toClassDetail">
				<view class="item-con">
					<view class="item-pic bg-1">
						<view class="item-title u-line-1">幼儿14天入门</view>
						<view class="item-sub-title">冠军教练一对一辅导</view>
						<view class="item-icon">
							<i class="iconfont icon-yinger"></i>
						</view>
					</view>
					<view class="item-msg">
						<view class="item-title u-line-2">幼儿14天入门</view>
						<view class="item-desc">
							<view class="item-price">￥399.00</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item" @click="toClassDetail">
				<view class="item-con">
					<view class="item-pic bg-2">
						<view class="item-title u-line-1">儿童15天蛙泳</view>
						<view class="item-sub-title">冠军教练一对一辅导</view>
						<view class="item-icon">
							<i class="iconfont icon-children-full"></i>
						</view>
					</view>
					<view class="item-msg">
						<view class="item-title u-line-2">儿童15天蛙泳</view>
						<view class="item-desc">
							<view class="item-price">￥399.00</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item" @click="toClassDetail">
				<view class="item-con">
					<view class="item-pic bg-3">
						<view class="item-title u-line-1">成人蛙泳10天速成</view>
						<view class="item-sub-title">冠军教练一对一辅导</view>
						<view class="item-icon">
							<i class="iconfont icon-youyong"></i>
						</view>
					</view>
					<view class="item-msg">
						<view class="item-title u-line-2">成人蛙泳10天速成</view>
						<view class="item-desc">
							<view class="item-price">￥399.00</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item" @click="toClassDetail">
				<view class="item-con">
					<view class="item-pic bg-4">
						<view class="item-title u-line-1">成人10天自由泳</view>
						<view class="item-sub-title">冠军教练一对一辅导</view>
						<view class="item-icon">
							<i class="iconfont icon-swimming"></i>
						</view>
					</view>
					<view class="item-msg">
						<view class="item-title u-line-2">成人10天自由泳</view>
						<view class="item-desc">
							<view class="item-price">￥399.00</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="box-floor">
		<view class="hd-title" @click="toActiveList">
			活动详情
			<view class="link-more">更多 <u-icon name="arrow-right-double" color="#999"></u-icon></view>
		</view>
		<view class="active-list">
			<view class="item">
				<view class="item-pic">
					<image src="http://127.0.0.1:32767/10.27.34/images/%E9%A6%96%E9%A1%B5/u85.svg"></image>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">
						非翔教育第一期夏令营活动召集令
					</view>
					<view class="item-detail">
						<view class="item-status">活动报名中</view>
						<view class="item-num">剩余<text>25</text>个名额</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-pic">
					<image src="http://lorempixel.com/200/200"></image>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">
						非翔教育第一期夏令营活动召集令
					</view>
					<view class="item-detail">
						<view class="item-status">活动报名中</view>
						<view class="item-num">剩余<text>25</text>个名额</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-pic">
					<image src="http://lorempixel.com/200/200"></image>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">
						非翔教育第一期夏令营活动召集令
					</view>
					<view class="item-detail">
						<view class="item-status status-1">活动进行中</view>
					</view>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
	  bannerList:[
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	  ]
    };
  },
  onLoad() {},
  methods: {
	  toClassList(){
		  uni.navigateTo({
			  url:'/pages/classlist/index'
		  })
	  },
	  toTicket(){
		  uni.switchTab({
			  url:'/pages/ticketlist/index'
		  })
	  },
	  toVenue(){
		  uni.navigateTo({
			  url:'/pages/venue/index'
		  })
	  },
	  toActiveList(){
		  uni.navigateTo({
			  url:'/pages/activelist/index'
		  })
	  },
	  toClassDetail(){
		  uni.navigateTo({
			  url:'/pages/classdetail/index'
		  })
	  },
  },
};
</script>

<style lang="scss">
.page{
	padding-bottom: 50rpx;
}
image{
	width: 100%;
	height: 100%;
}
.banner{
	height: 460rpx;
}
.nav{
	background: #fff;
	display: flex;
	padding: 50rpx 0;
	.item{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.icon{
			background-size: 160rpx;
    		background-position: 4rpx -10rpx;
			background-repeat: no-repeat;
			width: 170rpx;
			height: 140rpx;
			padding-top: 38rpx;
			text-align: center;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
		.text{
			margin-top: -10rpx;
		}
	}
	.item-1 .icon{
		background-image:url('');
		image{
			width: 36rpx;
			height: 40rpx;
		}
	}
	.item-2 .icon{
		background-image:url('');
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.item-3 .icon{
		background-image:url('');
		image{
			width: 34rpx;
			height: 44rpx;
		}
	}
	.item-4 .icon{
		background-image:url('');
		image{
			width: 44rpx;
			height: 44rpx;
		}
	}
}
.box-floor{
	margin-top: 20rpx;
	background: #fff;
	padding: 20rpx 30rpx;
	.hd-title{
		margin-bottom: 20rpx;
		font-size: 36rpx;
		display: flex;
		justify-items: center;
		justify-content: space-between;
		.link-more{
			font-size: 26rpx;
			color: #999;
			display: flex;
			align-items: center;
		}
	}
}
.box-venue{
	padding: 20rpx;
	border-radius: 10rpx;
	box-shadow: 0rpx 0rpx 20rpx rgba(143,168,191,0.5);
	.venue-pic{
		height: 350rpx;
	}
	.venue-address{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		.iconfont{
			margin-right: 10rpx;
			font-size: 40rpx;
			color: $uni-color-theme;
		}
	}
}
.item-list{
	display: flex;
	flex-wrap: wrap;
	margin-top: -10rpx;
	.item:nth-child(odd){
		padding-right: 1%;
	}
	.item:nth-child(even){
		padding-left: 1%;
	}
	.item{
		width: 50%;
		margin-top: 20rpx;
		.item-con{
			padding: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 10rpx rgba(143,168,191,0.35);
		}
		&-pic{
			position: relative;
			height: 156rpx;
			border-radius: 10rpx;
			padding: 30rpx 10rpx 10rpx;
			overflow: hidden;
			.item-title{
				color: #fff;
				padding-right: 20rpx;
				font-weight: 500;
				font-size: 32rpx;
			}
			.item-sub-title{
				margin-top: 10rpx;
				color: #fff;
				font-size: 20rpx;
			}
			.item-icon{
				position: absolute;
				z-index: 10;
				right: -40rpx;
				top: -40rpx;
				width: 120rpx;
				height: 120rpx;
				background: rgba(255,255,255,0.6);
				border-radius: 50%;
				.iconfont{
					position: absolute;
					bottom: 25rpx;
					left: 25rpx;
					font-size: 42rpx;
					color: #fff;
				}
			}
		}
		&-pic.bg-1{
			background: #CC66FF;
			box-shadow: 0 4rpx 10rpx rgba(204,102,255,0.5);
		}
		&-pic.bg-2{
			background: #0099FF;
			box-shadow: 0 4rpx 10rpx rgba(0,153,255,0.5);
		}
		&-pic.bg-3{
			background: #FF6666;
			box-shadow: 0 4rpx 10rpx rgba(255,102,102,0.5);
		}
		&-pic.bg-4{
			background: #00CCCC;
			box-shadow: 0 4rpx 10rpx rgba(0,204,204,0.5);
		}
		&-msg{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.item-title{
				font-weight: bold;
				margin-top: 20rpx;
			}
			.item-desc{
				display: flex;
				margin-top: 10rpx;
				justify-content: space-between;
				align-items: center;
				.item-price{
					color: #EFB336;
				}
				.item-count{
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
}
.active-list{
	.item{
		display: flex;
		padding: 20rpx 0;
		border-top: solid 1rpx #ddd;
		.item-pic{
			width: 140rpx;
			height: 140rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 20rpx;
			flex-shrink: 1;
			background: #f0f0f0;
		}
		.item-msg{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.item-title{
				font-size: 32rpx;
			}
			.item-detail{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-status{
					color: #f00;
				}
				.item-status.status-1{
					color: $uni-color-theme;
				}
				.item-num{
					color: #999;
					font-size: 24rpx;
					text{
						color:#f00;
					}
				}
			}
		}
	}
}
</style>
